<template>
  <div>
    <input
      type="checkbox"
      :checked="item.status == FINISHED"
      @click="setStatus(item.id)"
    />
    <span :class="item.status == FINISHED ? 'line-delete' : ''">{{
      item.content
    }}</span>
    <button @click="removeTodo(item.id)">删除</button>
    <button
      v-if="item.status != FINISHED"
      :class="item.status == WILLDO ? 'willdo' : 'doing'"
      @click="setDoing(item.id)"
    >
      {{ item.status == WILLDO ? "马上做..." : "正在做..." }}
    </button>
  </div>
</template>

<script lang='ts'>
import { ITodoItem } from "@/typings";
import { defineComponent, PropType } from "vue";
import { TodoStatus } from "@/typings";
interface IStatus {
  FINISHED: TodoStatus;
  WILLDO: TodoStatus;
}
export default defineComponent({
  name: "App",
  props: {
    item: Object as PropType<ITodoItem>,
  },
  components: {
    TodoStatus,
  },
  setup(_, { emit }) {
    const Status: IStatus = {
      FINISHED: TodoStatus.FINISHED,
      WILLDO: TodoStatus.WILLDO,
    };
    const setStatus = (id: number): void => {
      emit("setStatus", id);
    };
    const removeTodo = (id: number): void => {
      emit("removeTodo", id);
    };
    const setDoing = (id: number): void => {
      emit("setDoing", id);
    };
    return {
      ...Status,
      setStatus,
      removeTodo,
      setDoing,
    };
  },
});
</script>

<style scoped>
.line-delete {
  text-decoration: line-through;
}
.willdo {
  background-color: yellow;
  color: gray;
}
.doing {
  background-color: gray;
  color: white;
}
</style>